<template>
  <el-popover
    :show-after="500"
    placement="left-start"
    title="辅料信息"
    width="550"
    @show="open"
  >
    <template #reference>
      <div class="w-[130px]">
        <VText title="SKU" :value="row.sku" :copy="true"></VText>
      </div>
    </template>
    <div class="dialog-content1">
      <vxe-grid ref="tableRef" v-bind="tableOptionsSupplier"></vxe-grid>
    </div>
  </el-popover>
</template>

<script setup lang="jsx">
import { supplierHistory } from "../api.js";
import { reactive, toRefs } from "vue";

const props = defineProps({
  row: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const { row } = toRefs(props);

const data = reactive({
  formData: {
    audit_status: "",
    purchase_no: "",
  },
});

const { formData } = toRefs(data);
// 打开弹窗
const open = async () => {
  formData.value.sku = row.value.sku || -1;
  getSupplierHistory();
};

const getSupplierHistory = (data) => {
  tableOptionsSupplier.data = [];
  tableOptionsSupplier.loading = true;
  supplierHistory(data)
    .then((res) => {
      tableOptionsSupplier.data = res?.data || [];
    })
    .finally(() => {
      tableOptionsSupplier.loading = false;
    });
};

const tableOptionsSupplier = reactive({
  round: true,
  height: "350",
  autoHidden: true,
  columnConfig: {
    resizable: true,
  },
  loading: false,
  data: [],
  columns: [
    { title: "主SKU", field: "purchase_type_text" },
    { title: "子SKU", field: "purchase_days" },
    { title: "组成量", field: "created_at" },
  ],
});
</script>
<style>
.hidden {
  display: none;
}
.diff-class {
  color: #ff0000 !important;
}
</style>
